<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/common.css" />
<link rel="stylesheet" type="text/css" href="./css/formly.css" />
<title>Build</title>
<style type="text/css">
	.container {
		border: 1px solid #ccc;
		width: 950px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		padding-bottom:15px;
	}
	.header {
		margin-top : 20px;
		margin-left:20px;
	}
	.curusr {
		font: 16px/1.1 tahoma, Srial, helvetica, sans-serif, bold;
	}
	.username {
		font-weight: bold;
		color:blue;
	}
	.switch {
		margin-left:40px;
		font-style: italic;
		color:blue;
	}
	.buildInfo {
		margin-top : 30px;
		margin-left: 20px;
		width:900px;
	}
	.bldTitle {
		margin-top : 20px;
		margin-left: 5px;
		margin-bottom : 20px;
	}
	.ui-tab-panel label {
		font-weight: bold;
	}
	.bldTitle label{
		font-weight: bold;
		font-size : 20px;
	}
	
	.bldContent {
		border: 1px solid #ccc;
		margin-left:auto;
		margin-right:auto;
	}

	.oneLine label {
		display : inline-block;
		width : 100px;
		text-align: right;
		margin-right : 10px;
	}
	.oneLine .featureLbl {
		width: 170px;
		margin-left: 24px;
	}
	

	.radioDiv {
		display: inline-block;
		width: 120px;
	}
	.prodDiv {
		margin-left: 114px;
	}
	.edit {
		position: relative;
		top: 2px;
	}
	.edit img {
		left: -10px;
		top: 10px;
	}
	.butLine {
		margin-left:60px;
		margin-top:20px;
	}
	.butLine input {
		width:80px;
	}
	.butLine .reset {
		position: relative;
		left: 15px;
	}
	.area {
		height : 130px;
		width: 550px;
		overflow-y: scroll;
		vertical-align: top;
	}
	.select {
		width: 160px;
	}
	.buildTypeLbl{
		width:105px;
		margin-left:25px;
		margin-right: 74px;
		
	}
	.seperator {
		border: 1px dashed #ccc;
		width: 800px;
		margin-top: 15px;
		margin-left: auto;
		margin-right: auto;
	}
	.projectName , .deliverable{
		width:140px;
	}
	.ui-tabs {
		/*background-color: #EBEFF9;*/
		padding: 5px 10px 0 10px;
		margin: -6px 0 10px 0;
		height: auto;
	}
	.tabPanelContainer {
		height: auto;
		margin-top: -22px;
		padding-bottom: 10px;
		border: 1px solid #ccc;
		z-index: 1;
	}
	.tabContainer {
		height: 24px;
		position: relative;
		margin-left: -40px;	/* to align tabs left */
	}
	.ui-tab {
		padding: 0px 5px 0px 2px;
		float: left;
		position: relative;
		display: block;
		margin: 0px;
		width: 68px;
		height: auto;
		text-align: center;
		z-index: 2;
	}
	.ui-tabs a:hover {
		background: none;
		color: #000;
	}
	.ui-tab-selected {
		background: #fff;
		border: 1px solid #ccc;
		border-bottom: 1px solid #fff;
		color: #fff;
		font-weight: bold;
	}
	.ui-tab-selected a {
		color: #000;
	}
	.ui-tab-panel-selected {
		display: block;
	}
	.ui-tab-panel-hide {
		display: none;
	}
</style>

<script src="./js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="./js/common.js" type="text/javascript"></script>
<script src="./js/formly.js" type="text/javascript"></script>
<script type="text/javascript">
	var trainFeatureMappingXml;
	var buildTypeMappingXml;
	
	var tabs = 1;	//  tabs also equal to  project number
	
	$(document).ready(function(){
		
		$("#container").formly();
		$.ajax({url:"train_featureId.xml",
			type:"Get",
			dataType:"xml",
			success:function(xml){
				trainFeatureMappingXml = xml;
				$(xml).find("train").each(function(){
					var trainName = $(this).attr("name");//this->
					$(".train").append("<option>"+trainName+"<\/option>");
				});
				
				var curTrainVal = $(".train").val();
				$(trainFeatureMappingXml).find("train[name='"+curTrainVal+"']>pair").each(
						function() {
							$(".featureOrTrackerID").append("<option value=" + $($(this).find("value")[0]).text() + ">"+$($(this).find("name")[0]).text()+"<\/option>");
						}
				);
			}
		});
		
		$(document).on("change", ".train", function(){
			// $(e.target).closest("li").
			var featureOrTrackerID = $(this).parent().children(".featureOrTrackerID");//
			featureOrTrackerID.children().remove();
			//alert(featureOrTrackerID.html());
			//$(".featureOrTrackerID>option").remove();
			
			var curTrainVal = $(this).val();
			$(trainFeatureMappingXml).find("train[name='"+curTrainVal+"']>pair").each(
					function() {
						featureOrTrackerID.append("<option value=" + $($(this).find("value")[0]).text() + ">"+$($(this).find("name")[0]).text()+"<\/option>");
					}
			);
		});
		
		$(document).on("keyup", ".deliverable", function(){
		
			//var taskParam = $($($(this).parent().parent().find(".taskParam"))[0]);
			//taskParam.val("-deliverable "+$(this).val());
			var projectName = $($($(this).parent().parent().find(".projectName"))[0]);
			projectName.val($(this).val()+"_v3library");
		});
		
		$.ajax({url:"build_type_mapping.xml",
			type:"Get",
			dataType:"xml",
			success:function(xml){
				buildTypeMappingXml = xml;
				$(xml).find("buildtype").each(function(){
					var buildTypeName = $(this).attr("name");//this->
					$(".buildTypeCat").append("<option>"+buildTypeName+"<\/option>");
				});
				
				var curBuildTypeVal = $(".buildTypeCat").val();
				$(buildTypeMappingXml).find("buildtype[name='"+curBuildTypeVal+"']>item").each(
						function() {
							$(".buildType").append("<option value=" + $($(this).find("value")[0]).text() + ">"+$($(this).find("name")[0]).text()+"<\/option>");
						}
				);
				//$(".projectName").val($(".buildType").find("option:selected").text());
			}
		});
		
		$(document).on("change", ".buildTypeCat", function(){
			var buildType = $(this).parent().children(".buildType");
			buildType.children().remove();
			
			var curBuildTypeVal = $(this).val();
			$(buildTypeMappingXml).find("buildtype[name='"+curBuildTypeVal+"']>item").each(
					function() {
						buildType.append("<option value=" + $($(this).find("value")[0]).text() + ">"+$($(this).find("name")[0]).text()+"<\/option>");
					}
			);
			
			$(this).closest(".projectName").val(buildType.find("option:selected").text());
			//$("#projectName").val($("#buildType").find("option:selected").text());
		});
		
		$(document).on("change", ".buildType", function(){
			var curProjectNameVal = $(this).find("option:selected").text();
			$($($(this).parent().parent().children(".oneLine")[5]).children(".projectName")[0]).val(curProjectNameVal);
		});
		
		$(document).on("change", ".noTrackerId", function(){
			if($(this).attr("checked")=="checked") {
				var parentDiv = $(this).parent().parent().parent();
				$($(parentDiv.children(".oneLine")[3])).css("display", "none");
				$(parentDiv.children(".seperator")[1]).css("display", "none");
			}
		});
		
		$(document).on("change", ".feature", function() {
			if($(this).attr("checked")=="checked") {
				var parentDiv = $(this).parent().parent().parent();
				$($(parentDiv.children(".oneLine")[3])).css("display", "block");
				$(parentDiv.children(".seperator")[1]).css("display", "block");
			}
		});
		
		$(document).on("change", ".release", function() {
			if($(this).attr("checked")=="checked") {
				var parentDiv = $(this).parent().parent().parent();
				$($(parentDiv.children(".oneLine")[3])).css("display", "block");
				$(parentDiv.children(".seperator")[1]).css("display", "block");
			}
		});
		
		var tabTemplate = $($(".tabContainer").children(".ui-tab")[0]);
		var tabPanelTemplate = $($(".tabPanelContainer").children(".ui-tab-panel")[0]);
		$(".addProject").click(function(){
			tabs++;
			var newTab = tabTemplate.clone();
			
			$(":tabSelected").removeClass("ui-tab-selected");
			newTab.addClass("ui-tab-selected");
			newTab.attr("title", "project"+tabs);
			newTab.find("a").attr("href", "#panel-"+tabs);
			newTab.find("a").html("Project "+tabs);
			$(".tabContainer").append(newTab);
			
			var newTabPanel = tabPanelTemplate.clone();
			
			$(":tabPanelSelected").removeClass("ui-tab-panel-selected").addClass("ui-tab-panel-hide");
			newTabPanel.removeClass("ui-tab-panel-hide").addClass("ui-tab-panel-selected");
			newTabPanel.attr("id", "panel-"+tabs);
			newTabPanel.attr("margin-left", "0px");
			$(".tabPanelContainer").append(newTabPanel);
			
			$("[name='locale-1']", newTabPanel).attr("name", "locale-"+tabs);
			$("[name='poolType-1']", newTabPanel).attr("name", "poolType-"+tabs);
			$("[name='requestType-1']", newTabPanel).attr("name", "requestType-"+tabs);
			$("[name='train-1']", newTabPanel).attr("name", "train-"+tabs);
			$("[name='featureOrTrackerID-1']", newTabPanel).attr("name", "featureOrTrackerID-"+tabs);
			$("[name='buildTypeCat-1']", newTabPanel).attr("name", "buildTypeCat-"+tabs);
			$("[name='buildType-1']", newTabPanel).attr("name", "buildType-"+tabs);
			$("[name='projectName-1']", newTabPanel).attr("name", "projectName-"+tabs);
			$("[name='deliverable-1']", newTabPanel).attr("name", "deliverable-"+tabs);
			$("[name='configSpec-1']", newTabPanel).attr("name", "configSpec-"+tabs);
			$("[name='loadRules-1']", newTabPanel).attr("name", "loadRules-"+tabs);
			//$("[name='taskParam-1']", newTabPanel).attr("name", "taskParam-"+tabs);
			$("[name='autoDeploy-1']", newTabPanel).attr("name", "autoDeploy-"+tabs);
			
	
			$("[name='locale-1'][value='2']", tabPanelTemplate).attr("checked", "checked");
			$("[name='poolType-1'][value='-2']", tabPanelTemplate).attr("checked", "checked");
			$("[name='requestType-1'][value='0']", tabPanelTemplate).attr("checked", "checked");
			
		});
		
		$(document).on("click", ".ui-tab", function(){
			$(":tabSelected").removeClass("ui-tab-selected");
			$(this).addClass("ui-tab-selected");
			
			$(":tabPanelSelected").removeClass("ui-tab-panel-selected").addClass("ui-tab-panel-hide");
			$($(this).find("a").attr("href")).removeClass("ui-tab-panel-hide").addClass("ui-tab-panel-selected");
		});
		
	});
	
	// Define custom filter by extending $.expr[':']
	$.expr[':'].tabSelected = function(element) {
		return $(element).hasClass("ui-tab") && $(element).hasClass("ui-tab-selected");
	};
	$.expr[':'].tabPanelSelected = function(element) {
		return $(element).hasClass("ui-tab-panel") && $(element).hasClass("ui-tab-panel-selected");
	};
	
	function switchUser() {
		setCookie("creator","",-1);
		location.href="index.jsp";
	}
	
	function checkForm(){
		var isFormValid = true;
		
		$("#projectNum").val(tabs);
		
		$(".deliverable").each(function(){
			var errorProject = "Project " + $(this).closest(".ui-tab-panel").attr("id").substring(6);
			if(isNodeValEmpty($(this))) {
				alert(errorProject + "'s deliverable should not be empty!");
				isFormValid = false;
			}
		});
		
		if(!isFormValid) {
			return false;
		}
		
		$(".configSpec").each(function() {
			var errorProject = "Project " + $(this).closest(".ui-tab-panel").attr("id").substring(6);
			if(isNodeValEmpty($(this))){
				alert(errorProject + "'s config spec should not be empty!");
				isFormValid = false;
			}
		});
		
		if(!isFormValid) {
			return false;
		}
		
		$(".loadRules").each(function() {
			var errorProject = "Project " + $(this).closest(".ui-tab-panel").attr("id").substring(6);
			if(isNodeValEmpty($(this))){
				alert(errorProject + "'s load rules should not be empty!");
				isFormValid = false;
			}
		});
		
		return isFormValid;
	}
</script>
</head>
<body>
	<%
		String creator = request.getParameter("username");
		if(creator==null) {
			response.setHeader("Refresh", "0;URL=index.jsp");
		}
		else {
	%>
	<div class="container" id="container">
		<div class="header">
			<label class="curusr">Creator:</label>
			<label class="username"><%=creator %></label>
			<a class="switch" href="javascript:switchUser()" >switch user</a>
		</div>
		<div class="buildInfo">
			<div class="bldTitle">
				<label>Bulid Project</label>&nbsp;&nbsp;
				<input type="button" name="addProject" class="addProject" value="Add Project" style="float:none;" />
			</div>
			
			<div class="bldContent">
				<form action="BuildHandler" id="buildForm" method="post" onsubmit="return checkForm();">
					<input type="hidden" name="projectNum" id="projectNum" value="0" />
					<input type="hidden" name="creator" id="creator" value=<%=creator %> />
<%
	String shouldRemember = request.getParameter("remb");
	if(shouldRemember!=null) {	// should remember the creator
%>
	<script type="text/javascript">
		setCookie("creator",$("#creator").val(),24);
	</script>
<%
	}
%>
					<!-- Following is tabs and tab panels -->
					<div class="ui-tabs projects">
						<ul class="tabContainer">
							<li class="ui-tab ui-tab-selected" title="project1"><a href="#panel-1">Project 1</a></li>
						</ul><!-- tabContainer div ends -->
						
						<div class="tabPanelContainer">
							<div id="panel-1" class="ui-tab-panel ui-tab-panel-selected">
								
								<div class="oneLine">
									<label>Deliverable</label>
									<input type="text" name="deliverable-1" class="deliverable">
								</div>
								<div class="oneLine">
									<label>Project Name</label>
									<input type="text" name="projectName-1" class="projectName" value="DefaultProjectName">
								</div>
								<div class="oneLine">
									<label>Config Spec</label>
									<textarea name="configSpec-1" class="area configSpec"></textarea>
								</div>
								<div class="oneLine">
									<label>Load Rules</label>
									<textarea name="loadRules-1" class="area loadRules">load /builddeployv3
load /csv3
load /entities
load /externalv3
load /metadata
load /xmlschemas
load /v3billing
load /v3buildconfig
load /v3cdc
load /v3core
load /v3dal
load /v3daltests
load /v3dbit
load /v3j2ee
load /v3jars
load /v3megajars
load /v3resources
load /v3search
load /v3selling
load /v3services
load /v3tns
load /v4contentsource
load /v4ebaypres
load /v4sharedpres
load /v4soa
load /v3bes
load /v4spark
load /v4verification
load /v3coretests
load /v4bescore
load /v4besapp
load /v3trading
load /v4openebay
load /v4tracking
load /ugc
load /appsec
load /v4catalog
load /v4feedback
load /v4signin
load /v4datatools
load /v4sps
load /naturalsearch
load /nexustools/ProjectBuilds
load /v4darwin/ProjectBuilds
load /v3kernel/ProjectBuilds
load /v4libs/ProjectBuilds
load /globalmkts
load /v4rtm
load /v4bizmos
load /v4identitymanagement
load /v4mconfig
load /v4infrasvcs</textarea>
								</div>
								
								<div class="seperator"></div>
							
								<div class="oneLine">
									<label>Locale</label>
									<div class="radioDiv"><input type="text" value="CORE" readonly></div>
									<input type="hidden" name="locale-1" value="2" >
								</div>
					
								<div class="oneLine">
									<label>Pool Type</label>
								
									<div class="radioDiv"><input type="text" value="Production" readonly></div>
									<input type="hidden" name="poolType-1" value="1">
								</div>
					
								<div class="oneLine">
									<label>Request Type</label>
									<div class="radioDiv"><input type="text" value="Feature" readonly class="feature"></div>
									<input type="hidden" value="0" name="requestType-1">
								</div>
					
								<div class="oneLine trainAndFeature">
									<label>Train</label>
									<select name="train-1" class="select train"></select>
							
									<label class="featureLbl">Feature or Tracker ID</label>
									<select name="featureOrTrackerID-1" class="select featureOrTrackerID"></select>
								</div>
					
								<div class="oneLine">
									<label>Build Cat</label>
									<select name="buildTypeCat-1" class="select buildTypeCat">
									</select>
									<label class="buildTypeLbl">Build Type</label>
									<select name="buildType-1" class="select buildType">
									</select>
								</div>
								<!-- 
								<div class="oneLine">
									<label>Task Param</label>
									<input type="text" name="taskParam-1" style="width: 550px" class="taskParam">
								</div>
								 -->
								<div class="oneLine">
									<label>Auto Deploy</label>&nbsp;&nbsp;
									<input type="checkbox" name="autoDeploy-1" checked="checked">Yes
								</div>
								
							</div><!-- tab panel ends -->
						</div><!-- tabPanelConatiner div ends -->
					</div><!-- projects div ends -->
					
					<div class="butLine">
						<input type="submit" class="submit" name="build" value="Build">
						<input type="reset" class="reset" name="reset" value="Reset">
					</div>
				</form>
			</div>
		</div>
	</div>
	<%
		}
	%>
</body>
</html>